<template>
  <div>
    <div id="ranking">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>排行榜</span>
        </div>
        <div
          v-for="item in rankingData"
          :key="item.id"
          class="text item ranking_item"
          @click="getRankingSong({id:item.id})"
        >{{item.name}}</div>
      </el-card>
      <div id="ranking_song">
        <el-table ref="singleTable" :data="rankingSong" style="width: 100%">
          <el-table-column type="index" label="排行" width="80"></el-table-column>
          <el-table-column prop="name" label="歌曲" width="350"></el-table-column>
          <el-table-column prop="id" width="110">
            <template slot-scope="scope">
              <el-button @click="goPlay(scope)" round>播放</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="ar[0].name" label="歌手" width="270"></el-table-column>
          <el-table-column prop="dt" label="时长"></el-table-column>
        </el-table>
        <table></table>
      </div>
    </div>
  </div>
</template>


<script>
import { ranking, rankingSong } from "@/api";
export default {
  data() {
    return {
      rankingData: [],
      rankingSong: [],
      rankingSongId: ""
    };
  },
  created() {
    this.getRanking();
    this.getRankingSong({ id: "19723756" });
  },
  methods: {
    getRanking() {
      ranking().then(res => {
        this.rankingData = res.data.list;
        // console.log(res.data.list);
      });
    },
    getRankingSong(data) {
      // console.log(id);
      rankingSong(data).then(res => {
        const arr = res.data.playlist.tracks;
        // console.log(this.idData)
        for (let i = 0; i < arr.length; i++) {
          var dt = arr[i].dt;
          var minute = parseInt(parseInt(dt / 1000) / 60);
          var second = parseInt(dt / 1000) - minute * 60;
          if (minute < 10) {
            minute = "0" + minute;
          }
          if (second < 10) {
            second = "0" + second;
          }
          arr[i].dt = minute + ":" + second;
        }
        this.rankingSong = res.data.playlist.tracks;
        this.rankingSongId = res.data.playlist.id;
        // console.log(this.rankingSongId);
      });
    },
    goPlay(scope) {
      // console.log(scope.row.id)
      // this.$router.push({name:"player",params:{id:scope.row.id}})
      this.$router.push({
        name: "sing",
        params: { id: scope.row.id, rid: this.rankingSongId }
      });
      this.$router.push({name:'sing',params:{id:scope.row.id}})
      
    }
  }
};
</script>


<style>
#ranking {
  width: 1200px;
  margin: 50px auto 0;
  max-height: 550px;
  overflow: auto;
}
.text {
  font-size: 14px;
}
.ranking_item {
  cursor: pointer;
}
.ranking_item:hover {
  color: rgb(204, 235, 255);
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 220px;
  float: left;
}
#ranking_song {
  width: 900px;
  float: right;
}

#ranking::-webkit-scrollbar {
  width: 8px;
}
/* Track */

#ranking::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* Handle */

#ranking::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #f2f6f9;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
</style>